<template>
	<view class="container">
		<!-- 顶部搜索导航栏 -->
		<!-- <view class="search">
			<u-icon @click="goback" name="arrow-left" size="40"></u-icon>
			<input class="input" type="text" placeholder="搜索我的订单" />
		</view> -->
		<!-- 订单状态列表 -->
		<view class="state-list">
			<view :class="{'style':titleName==0}" @click="select(0)">全部</view>
			<view :class="{'style':titleName==1}" @click="select(1)">待付款</view>
			<view :class="{'style':titleName==2}" @click="select(2)">待发货</view>
			<view :class="{'style':titleName==3}" @click="select(3)">待收货</view>
			<view :class="{'style':titleName==4}" @click="select(4)">已完成</view>
		</view>
		<swiper class="swiper" @change="changeTab" :current="titleName">
			<!-- 全部 -->
			<swiper-item class="swiper-item">
				<scroll-view class="scroll-view" scroll-y @scrolltolower="getlist">
					<view class="all" v-for="(item,index) in list0">
						<view class="store">
							<view>
								<text class="store-name">徕吧商城</text>
								<!-- <u-icon name="arrow-right"></u-icon> -->
							</view>
							<view class="states">{{item.order_state | ordertext}}</view>
						</view>
						<view class="product" v-for="(it,i) in item.order_goods">
							<image class="product-image" :src="it.image.file_path" mode="aspectFit"></image>
							<view class="product-name">{{it.goods_name}}</view>
							<view class="price">
								<view>{{it.total_price}}积分</view>
								<view>x{{it.total_num}}</view>
							</view>
						</view>
						<view class="realpay">
							<!-- <text class="total">总价3999积分,</text> -->
							<text>需付款{{item.total_price}}积分</text>
						</view>
						<view class="btn-box">
							<!-- <view class="cancel">取消订单</view> -->
							<view class="cancel" @click="toorder(item.id)">订单详情</view>
							<view class="payfor" v-if="item.order_state==0" @click="topay(item.id)">付款</view>
							<view class="payfor" v-if="item.order_state==2" @click="shouhuo(item.id)">确认收货</view>
						</view>
					</view>
					<view v-if="list0.length==0" class="no">
						<image src="../../static/task.png" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 待付款 -->
			<swiper-item class="swiper-item">
				<scroll-view class="scroll-view" scroll-y>
					<view class="all" v-for="(item,index) in list1">
						<view class="store">
							<view>
								<text class="store-name">徕吧商城</text>
								<!-- <u-icon name="arrow-right"></u-icon> -->
							</view>
							<view class="states">待付款</view>
						</view>
						<view class="product" v-for="(it,i) in item.order_goods">
							<image class="product-image" :src="it.image.file_path" mode="aspectFit"></image>
							<view class="product-name">{{it.goods_name}}</view>
							<view class="price">
								<view>{{it.total_price}}积分</view>
								<view>x{{it.total_num}}</view>
							</view>
						</view>
						<view class="realpay">
							<!-- <text class="total">总价3999积分,</text> -->
							<text>需付款{{item.total_price}}积分</text>
						</view>
						<view class="btn-box">
							<!-- <view class="cancel">取消订单</view> -->
							<view class="cancel" @click="toorder(item.id)">订单详情</view>
							<view class="payfor" @click="topay(item.id)">付款</view>
						</view>
					</view>
					<view v-if="list1.length==0" class="no">
						<image src="../../static/task.png" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 待发货 -->
			<swiper-item class="swiper-item">
				<scroll-view class="scroll-view" scroll-y @scrolltolower="getlist">
					<view class="all" v-for="(item,index) in list2">
						<view class="store">
							<view>
								<text class="store-name">徕吧商城</text>
								<!-- <u-icon name="arrow-right"></u-icon> -->
							</view>
							<view class="states">{{item.order_state | ordertext}}</view>
						</view>
						<view class="product" v-for="(it,i) in item.order_goods">
							<image class="product-image" :src="it.image.file_path" mode="aspectFit"></image>
							<view class="product-name">{{it.goods_name}}</view>
							<view class="price">
								<view>{{it.total_price}}积分</view>
								<view>x{{it.total_num}}</view>
							</view>
						</view>
						<view class="realpay">
							<!-- <text class="total">总价3999积分,</text> -->
							<text>需付款{{item.total_price}}积分</text>
						</view>
						<view class="btn-box">
							<view class="cancel" @click="toorder(item.id)">订单详情</view>
							<!-- <view class="cancel">取消订单</view> -->
							<!-- <view class="payfor" v-if="item.order_state==0">付款</view> -->
						</view>
					</view>
					<view v-if="list2.length==0" class="no">
						<image src="../../static/task.png" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 待收货 -->
			<swiper-item class="swiper-item">
				<scroll-view class="scroll-view" scroll-y @scrolltolower="getlist">
					<view class="all" v-for="(item,index) in list3">
						<view class="store">
							<view>
								<text class="store-name">徕吧商城</text>
								<!-- <u-icon name="arrow-right"></u-icon> -->
							</view>
							<view class="states">{{item.order_state | ordertext}}</view>
						</view>
						<view class="product" v-for="(it,i) in item.order_goods">
							<image class="product-image" :src="it.image.file_path" mode="aspectFit"></image>
							<view class="product-name">{{it.goods_name}}</view>
							<view class="price">
								<view>{{it.total_price}}积分</view>
								<view>x{{it.total_num}}</view>
							</view>
						</view>
						<view class="realpay">
							<!-- <text class="total">总价3999积分,</text> -->
							<text>需付款{{item.total_price}}积分</text>
						</view>
						<view class="btn-box">
							<!-- <view class="cancel">取消订单</view> -->
							<view class="cancel" @click="toorder(item.id)">订单详情</view>
							<view class="payfor" v-if="item.order_state==2" @click="shouhuo(item.id)">确认收货</view>
						</view>
					</view>
					<view v-if="list3.length==0" class="no">
						<image src="../../static/task.png" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 完成 -->
			<swiper-item class="swiper-item">
				<scroll-view class="scroll-view" scroll-y @scrolltolower="getlist">
					<view class="all" v-for="(item,index) in list4">
						<view class="store">
							<view>
								<text class="store-name">徕吧商城</text>
								<!-- <u-icon name="arrow-right"></u-icon> -->
							</view>
							<view class="states">{{item.order_state | ordertext}}</view>
						</view>
						<view class="product" v-for="(it,i) in item.order_goods">
							<image class="product-image" :src="it.image.file_path" mode="aspectFit"></image>
							<view class="product-name">{{it.goods_name}}</view>
							<view class="price">
								<view>{{it.total_price}}积分</view>
								<view>x{{it.total_num}}</view>
							</view>
						</view>
						<view class="realpay">
							<!-- <text class="total">总价3999积分,</text> -->
							<view class="cancel" @click="toorder(item.id)">订单详情</view>
							<text>需付款{{item.total_price}}积分</text>
						</view>
						<view class="btn-box">
							<!-- <view class="cancel">取消订单</view> -->
							<!-- <view class="payfor" v-if="item.order_state==0">付款</view> -->
						</view>
					</view>
					<view v-if="list4.length==0" class="no">
						<image src="../../static/task.png" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		orderlist,shouhuo
	} from "../../api/product.js"
	export default {
		data() {
			return {
				titleName: 1,
				order0: "all", //全部
				order1: "unpay", //未支付
				order2: "unsend", //待发货
				order3: "unreceive", //待收货
				order4: "finished", //已完成
				list0: [],
				list1: [],
				list2: [],
				list3: [],
				list4: [],
				num0: 1,
				num1: 1,
				num2: 1,
				num3: 1,
				num4: 1
			}
		},
		onLoad(e) {
			if (e.type) {
				this.titleName = e.type
			}
		},
		onShow() {
			this.num0 = 1
			this.num1 = 1
			this.num2 = 1
			this.num3 = 1
			this.num4 = 1
			this.list0 = []
			this.list1 = []
			this.list2 = []
			this.list3 = []
			this.list4 = []
			this.getlist()
		},
		filters: {
			ordertext(e) {
				if (e == 0) {
					return '待付款'
				}
				if (e == 1) {
					return '待发货'
				}
				if (e == 2) {
					return '待收货'
				}
				if (e == 3) {
					return '完成'
				}
			}
		},
		watch: {
			titleName: {
				handler(n, o) {
					if (n != o && o != null) {
						if (this["list" + n].length == 0) {
							this.getlist()
						}
					}
				},
				deep: true
			}
		},
		methods: {
			async shouhuo(id){
				let res=await this.post(shouhuo,{
					user_id:uni.getStorageSync("userInfo").id,
					order_id:id
				})
				this.msg("收货成功")
				this.num0 = 1
				this.num1 = 1
				this.num2 = 1
				this.num3 = 1
				this.num4 = 1
				this.list0 = []
				this.list1 = []
				this.list2 = []
				this.list3 = []
				this.list4 = []
				this.getlist()
			},
			toorder(id){
				uni.navigateTo({
					url: "/pages/order/orderDetail?id=" + id
				})
			},
			topay(id) {
				uni.navigateTo({
					url: "/pages/order/moneyDesk?id=" + id
				})
			},
			async getlist() {
				uni.showLoading({
					title: '加载中'
				});
				let res = await this.post(orderlist, {
					user_id: uni.getStorageSync('userInfo').id,
					order_state: this['order' + this.titleName],
					page: this['num' + this.titleName]
				})
				if (res.data.data.length > 0) {
					this["num" + this.titleName]++
					res.data.data.forEach(item => {
						this["list" + this.titleName].push(item)
					})
				}
			},
			select(e) {
				this.titleName = e
			},
			changeTab(e) {
				console.log(e);
				this.titleName = e.detail.current
			},
			goback() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	.no {
		width: 750rpx;
		height: 70vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

	}

	.no>image{
		width: 400rpx;
		height: 300rpx;
	}

	page {
		background: #F1F1F1;
	}

	.container {
		padding: 0 30rpx 20rpx;
	}

	.search {
		display: flex;
		align-items: center;
		height: 64rpx;
	}

	.input {
		width: 604rpx;
		height: 64rpx;
		background: #E0E0E0;
		border-radius: 32rpx;
		padding-left: 50rpx;
		font-size: 20rpx;
		font-weight: 300;
		color: #333333;
		margin-left: 20rpx;
	}

	.state-list {
		display: flex;
		align-items: center;
		justify-content: space-around;
		box-sizing: border-box;
		height: 80rpx;
	}

	.style {
		border-bottom: 1px solid #707070;
		font-size: 26rpx;
		color: #333333;
	}

	.all {
		width: 690rpx;
		/* height: 463rpx; */
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.swiper {
		height: calc(100vh - 80rpx);
	}

	.swiper-item {
		height: calc(100vh - 80rpx);
	}

	.scroll-view {
		height: calc(100vh - 80rpx);
	}

	.store {
		display: flex;
		align-items: center;
		height: 40rpx;
		justify-content: space-between;
	}

	.store-name {
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40px;
		color: #333333;
		margin-right: 22rpx;
	}

	.states {
		font-size: 24rpx;
		font-weight: 400;
		color: #06923D;
	}

	.product {
		display: flex;
		height: 163rpx;
		width: 100%;
		margin-top: 20rpx;
	}

	.product-image {
		width: 163rpx;
		height: 163rpx;
	}

	.product-name {
		width: 295rpx;
		height: 111rpx;
		margin-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.price {
		margin-left: 65rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #575757;
		text-align: right;
	}

	.total {
		color: #999999;
	}

	.realpay {
		font-size: 28rpx;
		font-weight: 400;
		color: #575757;
		margin-top: 50rpx;
		text-align: right;
	}

	.btn-box {
		display: flex;
		align-items: center;
		margin-top: 50rpx;
		width: 100%;
		justify-content: flex-end;
	}

	.cancel {
		width: 155rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 1px solid #707070;
		border-radius: 33rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 26rpx;
		font-weight: bold;
		color: #999999;
		margin-left: auto;
	}

	.payfor {
		width: 155rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 1px solid #707070;
		border-radius: 30rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 40rpx;
	}
</style>
